Tips & Tricks

How should you call the compiled .js files?

Note that this is just complementary information. Since version 2.3, these steps are no longer required because the new HotSpot Editor does it automatically. Also, make sure you read the new Frames Support information.

As will be explained in this documentation, the .js files should be called from all the documents in your Web that will show the menus using the scripting line:

        <script language="JavaScript" src='menu.js'></script>

as shown in the hRef.txt file, which is regenerated every time you compile your project.

Note that depending on the type of code optimization the sample line above may differ from yours. Always look at the href.txt file for the correct code that should be used in your particular situation.

If you already have a page that is merged, either by using the Include Page Bot from FrontPage or by using SSI, into all of your documents, such as a header file, you should include the scripting lines in that page. This way, all your pages will automatically merge the contents of the menu.js file through your header file.

Calling the menus from text elements

Note that this is just complementary information. Since version 2.3, these steps are no longer required because the new HotSpot Editor does it automatically. Also, make sure you read the new Frames Support information.

Introduced in this new release, DHTML Menu Builder now features a Hot Spot Editor which will attach the menus to the elements you select in your document automatically.
Please review the Hot Spot Editor section of this Help for more information.
Anyway, it is a good idea that you understand how the menus are attached to your documents, so take a couple of minutes and read the information below. 

Introduction

The elements on a web page that react to mouse events to display a menu can be referenced to as hot spots. These hot spots can be anything from text labels, to images or even cell elements from a table.
In order to make these elements react to the mouse events you'll have to add some special code, which is supplied to you in the hRef.txt file. Each group you created using DHTML Menu Builder's interface will have its own code which you'll have to add to different elements in your page.

Text elements, on a HTML document do not require any special HTML tag. But the calling code, generated in the hRef.txt file, must be attached a valid HTML tag in order to function properly.

Internet Explorer 5.0 is very flexible in accepting JavaScripting code in almost any tag, but Navigator only supports such additions in a very limited set of tags.

For example, if the menus will only be viewed with IE you could insert the triggering code in to a null font tag:

<font>Navigation</font>

This is a null font tag because it has no parameters.

While working with IE you could add the code generated in the hRef.txt file into the opening font tag:

<font OnMouseOut="if(IE){event.srcElement.style.cursor='default'};" OnMouseOver="if(IE){event.srcElement.style.cursor='hand';};ShowMenu('mnuNav', 145, 119, false);">Navigation</font>

But unfortunately, this will have no effect when viewed using Navigator because of its poor object model... anyway, there's an easy workaround. We can create a dummy hyperlink which will be used to hold the code, like this:

<a href="#" OnMouseOut="if(IE){event.srcElement.style.cursor='default'};" OnMouseOver="if(IE){event.srcElement.style.cursor='hand';};ShowMenu('mnuNav', 145, 119, false);">Navigation</a>

This combination will work fine under both, Internet Explorer and Navigator just fine.

Calling the menus from image elements

Note that this is just complementary information. Since version 2.3, these steps are no longer required because the new HotSpot Editor does it automatically. Also, make sure you read the new Frames Support information.

A more common situation may be calling a menu from an image. The approach is exactly the same as when calling it from a text element, but this time there's no need to use the hyperlink trick, since Navigator supports scripting code inside the image tag.

<img src="/images/navbutton.gif" OnMouseOut="if(IE){event.srcElement.style.cursor='default'};" OnMouseOver="if(IE){event.srcElement.style.cursor='hand';};ShowMenu('mnuNav', 145, 119, false);">

Project General Properties

Local Path to the Root Web

This is the folder where your home page (usually index.html or default.asp) is located.

Folder to store the Compiled files

You must specify here where DHTML Menu Builder should store the compiled files, the .js scripts and the hRef.txt. You should always make this path point to a directory inside your root web, because these files should be published along with all your HTML documents and image files.

Document Containing the HotSpots

The destination file is the HTML document from your Web that contains the toolbar with the hotspots. If you use a separate file with the menus, which is shared across all the other pages on your web, this should be the file pointed by this setting. This setting is optional and it will only be used by the HotSpot Editor.

Final HTML Document

This is the file on your Web that displays your whole page, including the menus.
This setting is optional and it will only be used by the HotSpot Editor.

Use Full Paths

Check this option if you are publishing or previewing your menus from a web server. Leave it unchecked if you're previewing your menus from a local folder. If you check this option, DHTML Menu Builder will automatically generate full paths to the pages linked by the Action of each command.

Some words about the Action property

As mentioned on the Basics section, you can use the URL section to load pages. But remember that this property will be directly passed to the browser, so there're many things that can accomplished.

For example, you could use the simple keyword "alert" to display a message. If you want to try this, try adding this line to the URL property of some menu command:

javascript:alert('Hello');

Also, you can enter here some HTML code to create some special effects in the caption of you commands.
When entering HTML code, DHTML Menu Builder will create menus that are wider than they should. To correct this problem use the Group Width setting of the group's Special Effects dialog to force a smaller width value.